import { observer } from 'mobx-react';
import styles from './index.less';
import { Row, Col, Image, Button } from 'antd';
import React from 'react';
import { history } from 'umi';
import Header from '@/pages/components/header';
import Footer from '@/pages/components/footer';
import Gallerystore, { galleryStore } from '@/stores/galleryStore';
import { Rate } from 'antd';
import { isLikeStore } from '@/stores/isLikeStore';


/**
 * 详情页Props成员
 */
interface InfoPageProps {
  galleryStore: Gallerystore;
}

/**
 * 详情页组件
 */

@observer
export default class InfoPage extends React.Component<InfoPageProps> {
  // queryCount(e: any) {
  //   galleryStore.count = e++;
  // }
  componentDidMount() {
    // console.log();

    if (!history.location.query) {
      return;
    }
    const id = history.location.query['id'];
    console.log(id);

    if (!id) {
      return;
    }
    galleryStore.infoGallery(id);
  }
  render() {
    const { id, statusName, cover, title, tagName, writter, createBackground, gmtCreate, content, count, islike } = galleryStore.galleryInfo ?? {};
    return (
      <div>
        <Header />
        <div className={styles.content_container}>
          <div className={styles.now_devider}></div>
          <div className={styles.now_box}>
            <div className={styles.title_top}>{statusName}</div>
            <Row className={styles.now_container}>
              <Col span={10} className={styles.now_pic}>
                <Image src={galleryStore.imageURL + cover} className={styles.now_pic_img} />
              </Col>
              <Col span={14} style={{ marginTop: 'auto', marginBottom: 'auto', paddingLeft: '10px' }}>
                {/* {galleryStore.galleryInfo?.id} */}
                <div className={styles.now_title}>标题：{title}</div>
                <div className={styles.now_tips}>类别：{tagName}</div>
                <div className={styles.now_tips}>状态：{statusName}</div>
                <div className={styles.now_tips}>作者：{writter}</div>
                <div className={styles.now_tips}>创作背景：{createBackground}</div>
                <div className={styles.now_tips}>收藏时间：{gmtCreate}</div>
                <div className={styles.now_tips}>介绍：{content}</div>
                <div className={styles.now_count} >浏览量 {count}</div>
                <Button className={styles.submit} onClick={() => isLikeStore.onFinish(id)}><Rate count={1} value={islike} /></Button>
              </Col>
            </Row>
          </div>
          <Footer />
        </div>
      </div>
    );
  }

}
